<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播demo</title>

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.bannar {
				width: 1200px;
				overflow: hidden;
				position: relative;
				margin: 0 auto;
			}

			.swiper-button-div {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				z-index: 9999;
				top: 50%;
				transform: translateY(-50%);
				background-color: rgba(0, 0, 0, 1);
				cursor: pointer;
			}

			.swiper-button-left {
				left: 5%;
			}

			.swiper-button-right {
				right: 5%;
			}


			.pagination {
				list-style: none;
				text-align: center;
				padding: 10px;
			}

			.pagination li {
				display: inline;
				margin: 0 5px;
				width: 10px;
				height: 10px;
				background-color: #ccc !important;
				border-radius: 50%;
			}

			.pagination .current {
				background-color: #000 !important;
			}
		</style>
	</head>
	<body>
		<div class="bannar">
			<!-- bannar轮播 -->
			<div id="slider" class="swiper">
				<img src="http://xinhuajt.daorankeji.cn/tmp/uploads/20230301/52fae21e36c15dbf4848f5f105f5f5f3.jpg"
					title="标题">
				<img src="http://xinhuajt.daorankeji.cn/tmp/uploads/20240627/714cb7887f3f364618682e2331835b88.jpg">
			</div>

			<!-- 自定义切换按钮 -->
			<!-- <div class="swiper-button-left swiper-button-div"></div>
			<div class="swiper-button-right swiper-button-div"></div> -->
		</div>
	</body>
	<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.7.2/jquery.min.js"></script>
	<script src="flux.min.js"></script>

	<script>
		$(function() {
			if (!flux.browser.supportsTransitions) // 提示浏览器是否支持 CSS3 transitions
				alert("Flux Slider requires a browser that supports CSS3 transitions");

			window.f = new flux.slider('#slider', {
				autoplay: true, // 是否自动轮播
				delay: 5000, // 轮播时间间隔
				width: 1200, // 显示宽度  注：长宽比例最好跟图片一致，不然会被截图
				height: 700, // 显示高度
				pagination: '.pagination', // 分页器的选择器

				captions: false, //是否根据img 中title来显示标题
				// transitions: ['bars3d'],   //转换形式，以数组形势存在（默认为随机)
				// 【2D:"bars","blinds","blocks","blocks2","concentric","dissolve","slide","warp","zip"】
				// 【3D:"bars3d","blinds3d","cube","tiles3d","turn"】
			});

			// 自定义切换按钮
			// $('.swiper-button-left').click(() => {
			// 	window.f.prev()
			// })
			// $('.swiper-button-right').click(() => {
			// 	window.f.next()
			// })

			/* 
			window.f.函数()
				1.播放控制方法
					start() 开始自动播放
					stop() 停止自动播放
					isPlaying() 判断当前是否有在自动播放
				2.转换控制方法
					next([transition [, options]])：显示下一张图片
					transition：转换方式，缺省随机
					options：属性，只作用于这张图片
					prev([transition [, options]])：显示上一张图片（类似next（））
					showImage(index [, transition [, options]])：显示索引为index的图片
				3.其他
					getImage(index)：返回某张图片
			*/



		});
	</script>


</html>